<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>jQuery Slot Machine</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=2.0">
		<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="css/style-si.css" type="text/css" media="screen" />

		<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
		<script type="text/javascript" src="src/jquery.slotmachine.js"></script>
		<script type="text/javascript" src="src/config.js"></script>
	</head>
	<body>
		<div class="line" style="padding-top:50px;">
			<div class="content" style="text-align: center; background: url('./img/machine.png') no-repeat 50% 120px; height: 500px;">
				<div style="clear:both">
					<p class="title">可即时代抽大奖 </p>
				</div>
				<div style="clear:both; margin-top: 250px;">
					<div id="machine4" class="slotMachine" style="margin-left: -65px;">
					</div>
					<script>

						function getStaffName() {
							var html =  staffs.map(function (name, index) {
								return '<div class="slot">' + name + '</div>';
							}).join('');

							return '<div class="slot js-first first-slot">2017</div>' + html;
						}

						var activeEl = null;
						function onComplete($el, active){
							console.log(active.el.innerHTML);
							activeEl = active.el;
						}

						$(document).ready(function(){

							$('#machine4').html(getStaffName());

							var machine4 = $("#machine4").slotMachine({
								active	: 0,
								delay	: 5000
							});
							
							activeEl = $("#machine4").find('.js-first')[0];
							$("#slotMachineButtonShuffle").click(function(){
								if(!machine4.isRunning()){
									$(activeEl).remove();
									machine4.shuffle(1, onComplete);
								}
							});
							$("#slotMachineButtonStop").click(function(){
								if( machine4.isRunning() ){
									//True to stop now
									// setTimeout(function () {
										machine4.stop(true);
									// }, 1000);
								}
							});
						});
					</script>
				</div>
			</div>
			<div class="content">
				<div id="slotMachineButtonShuffle" class="slotMachineButton" style="font-size: 25px;margin-right: 100px;">开始</div>
				<div id="slotMachineButtonStop" class="slotMachineButton" style="font-size: 25px;display:none">停止</div>
			</div>
		</div>
		<div id="footer" style="display: none">
			<div class="content">
				<div id="textMachine2">
					<div>我要中奖</div>
					<div>天呀，就让我中了吧</div>
					<div>我的，我的!</div>
				</div>
				<script>
					$(document).ready(function(){
						$("#textMachine2").slotMachine({
							active	: 1,
							delay	: 450,
							repeat	: 1500
						});
					});
				</script>
			</div>
		</div>
	</body>
</html>

